<template>
  <!-- 评论 -->
  <div class="comment-list">
    <h3>评论</h3>
    <!-- 发布评论 -->
    <div class="edit-comment">
      <div class="avatar">
        <img :src="userInfo.avatarUrl" alt="">
      </div>
      <textarea name="" id="" placeholder="善语暖人心,恶语伤人寒" :class="{ 'height': height }" v-model="params.content"
        @focus="height = true" @blur="height = false"></textarea>
      <div class="submit-comment" :class="{ 'disabled': !params.content }" @click="postComment(params)">发表评论</div>
    </div>
    <!-- 评论列表 -->
    <ul class="comment-list-content">
      <li v-for="(item, index) in list" :key="item.commentId">
        <div class="commentPerson">
          <div class="avatar">
            <img :src="item.avatarUrl" alt="">
          </div>
        </div>
        <div class="commentContent">
          <div class="name">{{ item.nickname }}</div>
          <div class="content">{{ item.commentContent }}</div>
          <div class="info">
            <div class="time">发布时间: {{ formatDate(item.commentTime) }}</div>
            <!-- <div class="like">
              <i class="iconfont icon-good"></i>
              <span>123</span>
            </div> -->
          </div>
        </div>
      </li>
    </ul>

    <!-- 评论成功提示框 -->
    <ModelDialog v-show="modelShow">
      <template #body>
        <br>
        评论成功!
      </template>
      <template #footer>
        <button @click="modelShow = false">
          确定
        </button>
      </template>
    </ModelDialog>
  </div>
</template>

<script setup>
import { reqGetCommentList, reqPostComment } from '@/apis/comment';
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted, reactive } from 'vue';
import userStore from '@/stores/modules/user';
import { reqGetUserInfo } from '@/apis/user';
import ModelDialog from './ModelDialog.vue';

const route = useRoute();
const router = useRouter();
// 评论列表
let list = ref([]);
// 用户信息
let userInfo = ref({});
// 评论框高度
let height = ref(false)
// 评论成功提示框显示与否
const modelShow = ref(false)
//文章ID
const { id } = route.params;
// 评论参数
let params = reactive({
  userId: userStore().userId,
  passageId: id,
  content: ''
})

onMounted(() => {
  getComment(id)
  getUserInfo(params)
})

// 获取评论列表
const getComment = async (id) => {
  const res = await reqGetCommentList({ passageId: id });
  if (res.code == 200) {
    list.value = res.data;
  }
}

// 发布评论
const postComment = async (params) => {
  if (params.content) {
    const res = await reqPostComment(params)
    if (res.code == 200) {
      modelShow.value = true
      params.content = ''
      getComment(id)
    }
  }
}

// 获取用户信息
const getUserInfo = async () => {
  const res = await reqGetUserInfo(userStore().userId);
  if (res.code == 200) {
    userInfo.value = res.data;
  }
}

// 格式化时间
const formatDate = (date) => {
  return (date.slice(0, 10).split('-').join('/') + ' ' + date.slice(11, 16))
}

</script>

<style lang="scss" scoped>
// 评论
.comment-list {
  background-color: #fff;
  margin: .18rem 0;
  padding: .3333rem;
  width: 100%;
  height: 100%;

  h3 {
    font-size: .36rem;
    font-weight: bold;
    color: #654321;
  }

  // 发布评论
  .edit-comment {
    display: flex;
    align-items: center;
    gap: .2rem;
    margin: .444rem auto .666rem;
    width: 95%;

    .avatar {
      background-color: #fed342;
      border-radius: 10%;
      width: .8rem;
      height: .8rem;
      overflow: hidden;

      img {
        width: 100%;
      }
    }

    textarea {
      flex: 1;
      resize: none;
      padding: .0667rem;
      border: 1px solid #ccc;
      border-radius: .05rem;
      height: .5rem;
      font-size: .2rem;
      transition: all .3s;

      &::placeholder {
        color: #ccc
      }
    }

    .height {
      height: .75rem;
    }

    .submit-comment {
      background-color: #C7AFD5;
      border-radius: .3rem;
      width: 1.6rem;
      height: .7rem;
      line-height: .7rem;
      text-align: center;
      font-size: .3rem;
      color: #fff;
      cursor: pointer;
    }

    .disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
  }

  // 评论列表
  ul {
    li {
      display: flex;
      justify-content: space-between;
      align-items: start;
      margin: .333rem auto;
      padding-bottom: .3333rem;
      border-bottom: 1px dashed #ccc;
      width: 95%;

      .commentPerson {
        width: 1.1rem;

        .avatar {
          background-color: #fed342;
          border-radius: 50%;
          width: .8rem;
          height: .8rem;
          overflow: hidden;

          img {
            width: 100%;
          }
        }
      }

      .commentContent {
        flex: 1;
        display: flex;
        flex-direction: column;

        .name {
          font-size: .333rem;
          font-weight: bold;
          color: #654321;
        }

        .content {
          padding: .166rem 0;
          font-size: .3rem;
        }

        .info {
          display: flex;
          align-items: flex-end;
          gap: 1rem;

          .time {
            font-size: .25rem;
            color: #999;
          }

          .like {
            display: flex;
            align-items: flex-end;
            gap: .05rem;

            i {
              font-size: .333rem;
            }

            span {
              font-size: .27rem;
            }
          }
        }
      }
    }
  }
}

button {
  background-color: #bfb830;
  margin-left: .3333rem;
  padding: .0833rem;
  border: none;
  border-radius: 20%;
  color: #fff;
  cursor: pointer;
}
</style>